// variables
@select-area-border: none;
@select-area-color: rgba(128, 212, 255, 0.3);
@zoom-area-border: dashed 1px #777777;
@zoom-area-color: transparent;

@edge-default-color: #777;
@edge-default-width: 0.5;

@linking-stroke-dasharray: 5 5;
@linking-stroke-dashoffset: 0;

@node-selected-border: dashed 1px #777;
@node-targeted-border: solid 1px #f00;

@endpoint-size: 10px;
@endpoint-border: solid 2px #777;
@endpoint-color: #fff;

// z-indices
@tools-z-index: 3;
@edges-layer-z-index: 2;
@canvas-z-index: 1;

@zone-z-index: 1;
@node-z-index: 2;
@node-selected-z-index: 3;

@node-endpoints-z-index: 2;
@node-inner-z-index: 1;

@endpoint-targeted-border-color: #f00;
@endpoint-targeted-color: #fff;
@endpoint-targeted-border-style: solid;
@endpoint-targeted-border-width: 2px;
@endpoint-targeted-border: @endpoint-targeted-border-color @endpoint-targeted-border-style @endpoint-targeted-border-width;


.dragonfly-viewport {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;

  .dragonfly-tools {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 20px 0;
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 0;
    top: 0;
    z-index: @tools-z-index;

    button {
      border: none;
      padding: 0 1em;
      margin: 0;
      background-color: #fff;
      outline: none;

      &:hover {
        background-color: #eeeeee;
      }

      &.active {
        background-color: #9cdfff;
      }
    }
  }

  .dragonfly-edges-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    z-index: @edges-layer-z-index;
    overflow: visible !important;
    color: @edge-default-color;


    .arrow {
      stroke: none;
      stroke-width: 0;
      fill: currentColor;
      z-index: 2;
    }

    .anchor {
      stroke: currentColor;
      stroke-width: 1;
      fill: #fff;
      z-index: 4;
    }

    .edge-arrow {
      z-index: 3;
    }

    path.edge {
      z-index: 5;
      stroke-width: @edge-default-width;
      stroke: currentColor;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
      cursor: pointer;

      &.linking {
        pointer-events: none;
        stroke-dasharray: @linking-stroke-dasharray;
        stroke-dashoffset: @linking-stroke-dashoffset;
      }
    }

    path.edge-area {
      stroke-width: 10;
      stroke: transparent;
      fill: none;
      stroke-linecap: butt;
      stroke-linejoin: round;
      stroke-opacity: 0.2;
      cursor: pointer;
      z-index: 1;

      &:hover {
        stroke: #00aaff;
      }
    }


  }

  .dragonfly-canvas {
    position: relative;
    overflow: visible;
    width: 100%;
    height: 100%;
    transform-origin: 0 0 0; // 左上角缩放
    z-index: @canvas-z-index;

    &:focus {
      outline: none;
    }

    .dragonfly-node {
      position: absolute;
      z-index: @node-z-index;
      border: solid 1px transparent;
      margin: -1px;
      box-sizing: border-box;
      width: fit-content;
      height: fit-content;

      &.selected {
        border: @node-selected-border;
        z-index: @node-selected-z-index;
      }

      &:not(.selected).targeted {
        border: @node-targeted-border;
      }

      .dragonfly-node-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
        z-index: @node-inner-z-index;
      }

      .dragonfly-endpoints {
        position: absolute;
        overflow: visible;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        z-index: @node-endpoints-z-index;

        &.left {
          left: 0;
          top: 0;
          height: 100%;
          width: 0;
          flex-direction: column;

          .label {
          }
        }

        &.right {
          right: 0;
          top: 0;
          height: 100%;
          width: 0;
          flex-direction: column;
        }

        &.top {
          top: 0;
          left: 0;
          width: 100%;
          height: 0;
          flex-direction: row;
        }

        &.bottom {
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0;
          flex-direction: row;
        }

        .dragonfly-endpoint {
          display: flex;
          align-items: center;
          justify-content: center;
          width: @endpoint-size;
          height: @endpoint-size;
          border-radius: @endpoint-size;
          border: @endpoint-border;
          background-color: @endpoint-color;
          position: relative;

          &.targeted {
            border: @endpoint-targeted-border;
            background-color: @endpoint-targeted-color;
          }

          & > .label {
            position: absolute;
            width: max-content;
            font-size: 12px;
            transform: scale(0.8) translateZ(1);
            user-select: none;
          }
        }
      }

    }

    .edge-label {
      position: absolute;
      z-index: 6;
      width: 0;
      height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    .dragonfly-zone {
      background-color: #eeeeee;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: @zone-z-index;

      .dragonfly-zone-inner {
        width: 100%;
        height: 100%;
        z-index: 1;
      }

      &.selected {
        border: solid 0.5px #777;

        .anchor {
          width: 6px;
          height: 6px;
          background-color: #fff;
          border: solid 1px #000;
          position: absolute;
          transform-origin: center;
          z-index: 2;

          &.e {
            transform: translateX(50%);
            right: 0;
            cursor: col-resize;
          }

          &.w {
            transform: translateX(-50%);
            left: 0;
            cursor: col-resize;
          }

          &.n {
            transform: translateY(-50%);
            top: 0;
            cursor: row-resize;
          }

          &.s {
            transform: translateY(50%);
            bottom: 0;
            cursor: row-resize;
          }

          &.ne {
            transform: translateY(-50%) translateX(50%);
            top: 0;
            right: 0;
            cursor: nesw-resize;
          }

          &.se {
            transform: translateY(50%) translateX(50%);
            bottom: 0;
            right: 0;
            cursor: nwse-resize;
          }

          &.nw {
            transform: translateY(-50%) translateX(-50%);
            top: 0;
            left: 0;
            cursor: nwse-resize;
          }

          &.sw {
            transform: translateY(50%) translateX(-50%);
            bottom: 0;
            left: 0;
            cursor: nesw-resize;
          }
        }
      }
    }

    & > .area {
      position: absolute;
      z-index: 7;

      &.select {
        border: @select-area-border;
        background-color: @select-area-color;
      }

      &.zoom {
        background-color: @zoom-area-color;
        border: @zoom-area-border;
      }
    }
  }
}
